/**
 * createVNode：可执行的函数 用来生成虚拟dom对象
 * h1标签对应的虚拟dom
 * Message组件对应的虚拟dom
 *
 *
 * render: 可执行的函数 用来把createVNode产生的虚拟dom渲染为真实的dom
 * 语法：render(VNode, 挂载的节点)
 *
 */

// import { createVNode, render } from 'vue'
// // 引入写好的message组件
// import Message from '@/components/Message'
// const h1VNode = createVNode(
//   'h1',
//   {
//     id: 'box'
//   },
//   [
//     'this is h1'
//   ]
// )
// console.log(h1VNode)
// const MessageVNode = createVNode(
//   Message,
//   {
//     type: 'success',
//     text: '登录成功'
//   }
// )
// console.log(MessageVNode)

// // 仅仅是为了节点是可用的状态
// setTimeout(() => {
//   // render(h1VNode, document.getElementById('testContainer'))
//   render(MessageVNode, document.getElementById('testContainer'))
// }, 400)

import { createVNode, render } from 'vue'

// 做成的函数类似Element-ui里的函数Message({ type: 'error', text: '登录失败' })
// 1. 把函数的架子搭起来
// 2. 组件渲染的核心逻辑
import XtxMessage from './index.vue'
function Message ({ type, text }) {
  // 1.使用createVNode方法 把message组件生成虚拟dom 并且传入prop参数
  const VNode = createVNode(
    XtxMessage,
    {
      type,
      text
    }
  )
  // 2.render渲染成真实的dom 差一个挂载的节点container 生成一个container
  const container = document.createElement('div')
  // 把创建生成的container节点 添加的body的末尾
  document.body.appendChild(container)
  // 3.准备好container和虚拟dom 调用render生成真实dom 完成渲染
  render(VNode, container)

  // 4、延迟删除
  setTimeout(() => {
    render(null, container)
  }, 1200)
}

export default Message // 将Message方法传出去
